<template>
  <div class="table-demo">
    <ws-table :columns="tableColumns"
              :exTableData="exTableData"
              :exTotal="exTotal"
              isExData
              :ex-loading="loading"
              :operation="operation"
              @sort="sort"
              @handleEdit="handleEdit"
              @pagination="handlePagination"
    >
      <template #level="{row}">
        <span style="color:deepskyblue">
          {{ row.level }}
        </span>
      </template>
      <template #opera="{row, index}">
        <el-button link type="success" @click="handleEdit(row, index)">插槽</el-button>
      </template>
    </ws-table>
  </div>
</template>

<script setup>
defineOptions({
  name: 'table_outsideQuery'
})
const state = reactive({
  tableColumns: [
    {label: '页码', prop: 'page', align: 'center', sortable: false, width: 60},
    {label: '姓名', prop: 'staffName', sortable: 'custom'},
    {label: '手机号', prop: 'phone', sortable: 'custom'},
    {label: '地址', prop: 'address', sortable: 'custom'},
    {label: 'Email', prop: 'email', sortable: 'custom'},
    {label: '创建时间', prop: 'createTime', sortable: 'custom'},
    {label: '会员等级', type: 'slot', prop: 'level', sortable: 'custom'}
  ],
  exTableData: [],
  exTotal: 0,
  loading: false,
  operation: {
    data: [
      {label: '编辑', handle: 'edit', type: 'danger'}
    ]
  }
})
const {tableColumns, exTableData, exTotal, loading, operation} = toRefs(state)
onMounted(() => {
  const pageNo = 1
  const pageSize = 10
  getData({pageNo, pageSize})
})
const getData = async ({pageNo, pageSize, sortColumn, sortDir}) => {
  state.loading = true
  request({
    url: '/user/page',
    method: 'post',
    data: {
      pageNo,
      pageSize,
      sortColumn,
      sortDir
    }
  }).then(async res => {
    await new Promise((resolve) => {
      setTimeout(resolve, 3000)
    })
    if (res.code === 200) {
      state.exTableData = res.data.result
      state.exTotal = 100
    }
    state.loading = false
  })
}
const handleEdit = (row) => {
  Emessage('success', row)
}
const sort = ({sortColumn, sortDir}) => {
  getData({sortColumn, sortDir})
}
const handlePagination = ({pageNo, pageSize}) => {
  getData({pageNo, pageSize})
}
// 删除
</script>

<style lang="scss" scoped>
.table-demo {
  width: 100%;
  height: 100%;
  position: relative;

  .title {
    display: flex;
    height: 50px;
    align-items: center;
    font-size: 20px;
  }

  .ws-table {
    :deep(.el-table) {
    }
  }
}
</style>
